<template>
    <view class="xilu">
		<view class="container">
			<!--  -->
			<view class="xilu_classic_list fs32 col89">
				<view :class="classicIndex == index?'active':''" class="xilu_class_item"
					v-for="(item,index) in classList" @click="changeList(index)">{{item.name}}</view>
			</view>
			<!--  -->
			 <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="xilu_goods_item" v-for="(item,index) in orderList">
				<view class="flex-box">
					<view class="fs28 col89 flex-grow-1">订单号 {{item.order_no}}</view>
					<!-- <view class="red">待付款</view>
				<view class="lightblue">待发货</view>
				<view class="col10">待收货</view> -->
					<view :class="[item.state==0?'red':(item.state==1?'lightblue':(item.state==2?'col10':'col5'))]">{{item.state_text}}</view>
				</view>
				<view @click="bindOrderDetail(item.id)">
					<view class="flex-box pt15 pb25" v-for="(product,index) in item.order_product">
						<image :src="product.image" mode="aspectFill" class="xilu_pic"></image>
						<view class="flex-grow-1">
							<view class="fs30 pb15 col10 m-ellipsis">{{product.product_name}}</view>
							<view class="fs34 pb15"><text class="fs24">¥</text>{{product.product_price}}</view>
							<view class="tr red fs40">
								<text class="fs30 col5">合计：</text>
								<text class="fs24">¥</text>
								<text class="fwb">{{product.sum_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-box">
					<view class="flex-grow-1">
						<view class="flex-box pb5">
							<image :src="item.user.avatar" class="xilu_avatar" mode="aspectFill">
							</image>
							<view class="fs28 blue m-ellipsis flex-grow-1">{{item.user.nickname}}</view>
						</view>
						<view class="fs24 red" v-if="item.state==0 && item.expiretime_text">请在{{item.expiretime_text}}前付款</view>
					</view>
					<view class="btn2 mr30" v-if="item.order_type==1&&item.state==2" @click="bindLogistics(item.id)">查看物流</view>
					<view class="btn2 mr30" v-if="item.state==0" @click="orderCancel(index,item.id)">取消订单</view>
					<view class="btn1" v-if="item.state==0" @click="orderPay(index,item.id)">去支付</view>
					<view class="btn1" v-if="item.state==2" @click="orderConfrm(index,item.id)">确认收货</view>
					<view class="btn1" v-if="item.state==3" @click="orderComment(index)">去评价</view>
				</view>
			</view>
			</mescroll-body>
		</view>
        
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                classList: [{id:0,name:"全部"}, {id:1,name:"待付款"},{id:2,name:"待发货"},{id:3,name:"待收货"}, {id:4,name:"待评价"}, {id:5,name:"已完成"}, {id:6,name:"退款中"}],
                classicIndex: 0,
				orderList:[],
                upOption:{
                    bgColor:"#f7f9fc",
                    textColor:"#aaa"
                }
            };
        },
		
        methods: {
            changeList(index) {
                this.classicIndex = index;
				this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调*/
            upCallback(page) {
            	// 此处可以继续请求其他接口
            	let pageNum = page.num; // 页码, 默认从1开始
            	let pageSize = page.size; // 页长, 默认每页10条
            	let state = this.classList[this.classicIndex].id;
            	this.$core.get({
            		url: 'xilumarket.order/lists',
            		loading:false,
            		data:{state: state,page: pageNum,pageSize:pageSize},
            		success: (ret) => {
            			let data = ret.data;
            			// 接口返回的当前页数据列表 (数组)
            			let curPageData = data.data;
            			// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
            			let curPageLen = curPageData.length;
            			// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
            			let totalPage = data.last_page;
            			// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
            	
            			//设置列表数据
            			if (page.num == 1) this.orderList = []; //如果是第一页需手动置空列表
            			this.orderList = this.orderList.concat(curPageData); //追加新数据
            	
            			// 请求成功,隐藏加载状态
            			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
            			this.mescroll.endByPage(curPageLen, totalPage);
            	
            			
            			setTimeout(() => {
            				this.mescroll.endSuccess(curPageLen)
            			}, 20)
            		},
            		fail: () => {
            			//  请求失败,隐藏加载状态
            			this.mescroll.endErr()
            		}
            	})
            },
			bindOrderDetail(id){
				uni.navigateTo({
					url: '/pages/buy_order_detail/buy_order_detail?id='+id
				});
			},
			//去支付
			orderPay(index,id){
				uni.navigateTo({
					url: '/pages/pay_action/pay_action?order_id='+id,
					events:{
						paySuccess:data=>{
							this.mescroll.resetUpScroll();
						}
					}
				});
			},
			//取消订单
			orderCancel(index,id){
				let page = this;
				uni.showModal({
					title: '取消提醒',
					content: '确认取消订单',
					success(res) {
						if(res.confirm){
							page.$core.post({url: 'xilumarket.order/cancel',data: {order_id: id},success: (ret) => {
							        uni.showToast({title: '取消成功',icon: 'none'})
							        page.mescroll.resetUpScroll()
							    },
							    fail: () => {
							
							    }
							})
						}
						
					}
				})
			},
			//确认收货
			orderConfrm(index,id){
				let page = this;
				uni.showModal({
					title: '收货提示',
					content: '确认收货成功',
					success(res) {
						if(res.confirm){
							page.$core.post({url: 'xilumarket.order/receive',data: {order_id: id},success: (ret) => {
							        uni.showToast({title: '收货成功',icon: 'none'})
							        page.mescroll.resetUpScroll();
							    },
							    fail: () => {
							
							    }
							})
						}
					}
				})
			},
			//去评价
			orderComment(index){
				let orderList = this.orderList,order = orderList[index],orderProduct = order.order_product;
				if(order.comment_status == 1){
					uni.showToast({title:"不要重复评价",icon: 'none'});
					return;
				}
				uni.navigateTo({
					url: '/pages/comment_now/comment_now',
					events:{
						commentSuccess: data=>{
							let index2 = null;
							for (let i = 0; i < orderList.length; i++) {
								if (orderList[i].id == data.id) {
									index2 = i;
									break;
								}
							}
							orderList.splice(index2, 1, data);
							this.orderList = orderList;
						}
					},
					success(res) {
					    res.eventChannel.emit('commentTransfor', orderProduct)
					}
				});
			},
			//物流
			bindLogistics(orderId){
				uni.navigateTo({
					url: '/pages/logistics/logistics?order_id='+orderId
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            background-color: #f7f9fc;
        }

        &_classic_list {
            padding: 30rpx 0;
            width: 100%;
            overflow-x: scroll;
            white-space: nowrap;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        &_class_item {
            display: inline-block;
            margin-left: 50rpx;

            &.active {
                font-size: 32rpx;
                color: #101010;
                position: relative;

                &::after {
                    display: block;
                    content: "";
                    width: 31rpx;
                    height: 13rpx;
                    background: url(@/static/icon/index_active.png) no-repeat center;
                    background-size: 100%;
                    position: absolute;
                    bottom: -16rpx;
                    left: 0;
                    right: 0;
                    margin: auto;
                }
            }

            &:first-child {
                margin-left: 30rpx;
            }
        }

        &_goods_item {
            background-color: #fff;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
            margin: 30rpx;
            padding: 30rpx;
        }

        &_pic {
            width: 150rpx;
            height: 150rpx;
            margin-right: 30rpx;
            border-radius: 10rpx;
        }

        &_avatar {
            width: 35rpx;
            height: 35rpx;
            border-radius: 50%;
            margin-right: 20rpx;

        }

        .btn1,
        .btn2 {
            width: 150rpx;
            height: 65rpx;
            line-height: 65rpx;
            font-size: 24rpx;
        }
    }
</style>
